<template>
  <div class="coponmodel">
    <el-dialog
      :showClose="false"
      title="优惠卷发放"
      :visible.sync="centerDialogVisibleUse"
      top
      width="100%"
      :fullscreen="true"
    >
      <div class="couponInfo">
        <el-descriptions
          class="margin-top"
          title=""
          :column="3"
          size="medium"
          border
          :direction="direction"
        >
          <el-descriptions-item
            :label-style="labelStyle"
            :content-style="contentStyle"
          >
            <template slot="label"> 价值 </template>
            {{ this.currentRow.methodAmount / 100 }}元
          </el-descriptions-item>
          <el-descriptions-item
            :label-style="labelStyle"
            :content-style="contentStyle"
          >
            <template slot="label"> 可用订单金额 </template>
            <div v-if="this.currentRow.useConditions === -1">无使用限制</div>
            <div v-else>
              {{ this.currentRow.useConditions / 100 }}元
            </div></el-descriptions-item
          >
          <el-descriptions-item
            :label-style="labelStyle"
            :content-style="contentStyle"
          >
            <template slot="label"> 优惠卷数量 </template>
            {{ this.currentRow.publishTotalNumber }}张
          </el-descriptions-item>
          <el-descriptions-item
            :label-style="labelStyle"
            :content-style="contentStyle"
          >
            <template slot="label"> 已发放数量 </template>
            {{
              this.currentRow.publishedNumber === null
                ? 0
                : this.currentRow.publishedNumber
            }}张
          </el-descriptions-item>
          <el-descriptions-item
            :label-style="labelStyle"
            :content-style="contentStyle"
          >
            <template slot="label"> 可发放数量 </template>
            <div v-if="this.currentRow.remainderNumber === -1">无限制</div>
            <div v-else>{{ this.currentRow.remainderNumber }}张</div>
            <!-- {{ this.currentRow.remainderNumber }}张 -->
          </el-descriptions-item>
          <el-descriptions-item
            :label-style="labelStyle"
            :content-style="contentStyle"
          >
            <template slot="label"> 有效期 </template>
            {{ this.currentRow.startDate }}~{{ this.currentRow.endDate }}
          </el-descriptions-item>
          <el-descriptions-item
            :label-style="labelStyle"
            :content-style="contentStyle"
          >
            <template slot="label"> 发放类型 </template>
            <el-radio-group v-model="GrantType" @input="chooseGrantType">
              <el-radio :label="0">全部会员</el-radio>
              <el-radio :label="1">指定会员</el-radio>
            </el-radio-group>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="couponUse" v-if="userTable">
        <div class="topSearch">
          <div class="topSearchLeft">
            <div>
              <p>昵称:</p>
              <el-input
                v-model="nickName"
                :style="{
                  width: '160px',
                  marginLeft: '20px',
                  marginRight: '20px',
                }"
                placeholder="请输入昵称"
                :clearable="true"
                @clear="Refresh"
              ></el-input>
            </div>
            <div>
              <p>账号:</p>
              <el-input
                v-model="account"
                :style="{
                  width: '160px',
                  marginLeft: '20px',
                  marginRight: '20px',
                }"
                placeholder="请输入账号"
                :clearable="true"
                @clear="Refresh"
              ></el-input>
            </div>
          </div>
          <div class="topSearchRight">
            <el-button type="primary" @click="handleSearch"> 查询 </el-button>
            <el-button @click="reset"> 重置 </el-button>
          </div>
          <!-- <el-button
            :style="{ marginLeft: '20px' }"
            round
            size="mini"
            @click="Refresh"
            >刷新
          </el-button> 
          <el-button circle icon="el-icon-refresh-right" @click="Refresh">
          </el-button>-->
        </div>
        <div class="topButton">
          <div class="topButtonLeft">
            <el-button @click="cancelgoodesmodel3">取 消</el-button>
            <el-button el-button type="primary" @click="saveCouponHandle">
              确 定
            </el-button>
          </div>
          <div class="topButtonRight">
            <el-button circle icon="el-icon-refresh-right" @click="Refresh">
            </el-button>
          </div>
        </div>
        <div style="margin-top: 20px">
          <!-- <el-input
            v-model="nickName"
            :style="{
              width: '160px',
              marginLeft: '20px',
              marginRight: '20px',
            }"
            placeholder="昵称"
            :clearable="true"
            @clear="Refresh"
          ></el-input>
          <el-input
            v-model="account"
            :style="{
              width: '160px',
              marginLeft: '20px',
              marginRight: '20px',
            }"
            placeholder="账号"
            :clearable="true"
            @clear="Refresh"
          ></el-input>
          <el-button
            v-model="searchShop"
            :style="{ marginLeft: '20px' }"
            circle
            icon="el-icon-search"
            @click="handleSearch"
          ></el-button> -->
        </div>
        <!-- <div class="choosediv">
          <div>当前表格已选择{{ this.chooseNumber }}项</div>
          <div>{{ this.errMessage }}</div>
        </div>-->
        <el-table
          class="elTable"
          v-loading="loading"
          :cell-style="{ 'text-align': 'center' }"
          :data="goodsList"
          :header-cell-style="{ 'text-align': 'center' }"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="80"></el-table-column>
          <el-table-column fixed label="排序" prop="sort" min-width="80">
            <template slot-scope="scope">
              <div class="flex-container">
                <span class="flex-item">
                  {{ scope.$index + 1 }}
                </span>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="姓名" prop="name" width="300">
          </el-table-column> -->
          <el-table-column label="账号" prop="account" min-width="270">
          </el-table-column>
          <el-table-column label="昵称" prop="nickName" min-width="270">
          </el-table-column>
          <el-table-column label="用户类型" prop="type" min-width="270">
            <template slot-scope="scope">
              <div class="flex-container">
                <span class="flex-item">
                  <p>{{ getTypeText(scope.row.type) }}</p>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="phone" min-width="270">
          </el-table-column>
          <!-- <el-table-column label="身份证号" prop="idCard" min-width="300">
          </el-table-column>
          <el-table-column label="性别" prop="sex" min-width="300">
          </el-table-column> -->
          <el-table-column label="邮箱" prop="email" min-width="340">
          </el-table-column>
        </el-table>

        <div class="paging">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <!-- <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination> -->
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="cancelgoodesmodel3">取 消</el-button>
        <el-button type="primary" @click="saveCouponHandle">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  QueryMemberList,
  DiscountCoupons,
} from "@/api/mallApi/managementend/coupon";
export default {
  name: "GrantCoupon",
  components: {},
  props: {
    centerDialogVisibleUse: {
      type: Boolean,
      default: false,
    },
    couponId: String,
    currentRow: Object,
  },
  data() {
    return {
      errMessage: "",
      chooseNumber: 0,
      userTable: false,
      nickName: null,
      account: null,
      // nickName:null,
      searchTime: "",
      storeStatus: "", //店铺状态搜索
      mallCode: "", //店铺名称搜索
      // 添加/修改 商品弹窗
      // centerDialogVisibleUse: false,
      enterType: 0, // 默认值为1，表示从编辑按钮进入
      cancelSubmit: 0, //商品审核不能确定修改
      searchShop: "",
      goodsList: [],
      selectedRows: [], // 表格 多选内容
      isButtonDisabled: false, // checkbox 联动按钮
      currentPage: 1, // 分页
      total: 0,
      pageSize: 10,
      loading: false,
      couponName: "",
      direction: "horizontal",
      GrantType: 0,
      // 	自定义标签样式
      labelStyle: {
        color: "#000",
        "text-align": "center",
        "font-weight": "600",
        height: "40px",
        width: "200px",
        "background-color": "#d6dbe1",
        "min-width": "100px",
        "word-break": "keep-all",
        border: "1px solid black",
      },
      //自定义内容样式
      contentStyle: {
        "text-align": "center",
        "word-break": "break-all",
        width: "300px",
        border: "1px solid black",
      },
    };
  },
  methods: {
    //重置按钮操作
    reset() {
      this.nickName = null;
      this.account = null;
      this.Refresh();
    },
    chooseGrantType(e) {
      //console.log(e);
    },
    handleSearch() {
      this.currentPage = 1;
      this.getCouponList();
    },
    saveCouponHandle() {
      const data = {
        userIds: this.selectedRows,
        couponId: this.couponId,
        type: this.GrantType,
      };
      DiscountCoupons(data)
        .then((res) => {
          if (res.code !== "00000") return;
          //   console.log("领取", res);
          this.$message({
            message: "优惠卷发放成功！",
            type: "success",
          });
        })
        .catch((error) => {
          console.error("DiscountCoupons 请求失败:", error);
          //   this.errMessage = error.message;
        });
    },
    getTypeText(type) {
      switch (
        type //1:买家 2：卖家 3：超管
      ) {
        case 1:
          return "买家";
        case 2:
          return "卖家";
        case 3:
          return "超管";
        default:
          return "未知";
      }
    },
    cancelgoodesmodel3() {
      this.$emit("cancelgoodesmodel3", false);
    }, // 取消按钮 传值
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCouponList();
    },
    handleCurrentChange(val) {
      // 分页
      this.currentPage = val;
      this.getCouponList();
    },
    // 获取商品列表
    getCouponList() {
      this.loading = true;
      const params = {
        searchBeginTime: "", //开始时间
        searchEndTime: "", //结束时间
        pageSize: this.pageSize, //分页：每页大小（默认10）
        pageNo: this.currentPage, //分页：第几页（从1开始）
        name: this.nickName, //名称
        phone: this.account, //手机号同账号
      };
      //   获取店铺列表
      QueryMemberList(params)
        .then((res) => {
          //console.log("查询优惠卷列表", res);
          if (res.code !== "00000") return;
          this.goodsList = res.data.list;
          this.total = parseInt(res.data.total);
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    Refresh() {
      this.getCouponList();
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection.map((item) => item.id);
      this.chooseNumber = selection.length;
    }, // 表格多选
  },
  mounted() {},
  created() {
    this.Refresh();
  },
  watch: {
    centerDialogVisibleUse(newVal) {
      // 监听 centerDialogVisibleUse 的变化
      if (!newVal) {
        // 当 centerDialogVisibleUse 变为 false 时触发事件
        this.$emit("close-dialog");
      }
    },
    GrantType(newVal) {
      //   //console.log(newVal, "123");
      if (newVal === 0) {
        this.userTable = false;
        this.selectedRows = [];
      } else if (newVal === 1) {
        this.userTable = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
//商品添加model
.coponmodel {
  width: 100vw;
  height: 100vh;
  .couponInfo {
    width: 100%;
    // height: 400px;
    // background-color: antiquewhite;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .couponUse {
    width: 98%;
    margin-left: 1%;
    // height: 920px;
    // background-color: antiquewhite;
    .topSearch {
      width: 100%;
      margin-top: 20px;
      margin-bottom: 30px;
      height: auto;
      display: flex;
      justify-content: space-between;
      .topSearchLeft {
        width: 1100px;
        display: flex;
        div {
          display: flex;
          align-items: center;
        }
      }
      .topSearchRight {
        display: flex;
        align-items: center;
      }
    }
    // .choosediv {
    //   > div:nth-child(1) {
    //     width: 600px;
    //     font-size: 16px;
    //     margin-left: 20px;
    //     margin-bottom: 10px;
    //     margin-top: 10px;
    //     background-color: #ecf5ff;
    //     border-color: #d9ecff;
    //     display: inline-block;
    //     height: 32px;
    //     padding: 0 10px;
    //     line-height: 30px;
    //     color: #409eff;
    //     border-width: 1px;
    //     border-style: solid;
    //     border-radius: 4px;
    //     box-sizing: border-box;
    //     white-space: nowrap;
    //     letter-spacing: 2px;
    //   }
    // }
    .paging {
      width: 99%;
      height: 50px;
      // background-color: antiquewhite;
      display: flex;
      align-items: end;
      justify-content: end;
    }
  }
  .el-dialog__footer {
    // position: sticky !important;
    text-align: center;
  }
}
</style>
